<template>
    <div class="q">
        <div class="w">
            <span>0-9 c</span>
            <img src="../images/0.7.png" alt="">
        </div>
        <div class="e">
            <div class="left">
                <img src="../images/0.8.png" alt="">
            </div>
            <div class="right">
                <div class="r">
                    <span>登录领取福利</span>
                </div>
                <div class="t">
                    <span>享受更多优质服务</span>
                </div>
                <button>签到领车币</button>
            </div>
        </div>
        <div class="u">
            <ul>
                <li><img src="../images/0.9.png" alt=""></li>
                <span>我的订单</span>
            </ul>
            <ul>
                <li><img src="../images/0.9.png" alt=""></li>
                <span>我的收藏</span>
            </ul>
            <ul>
                <li><img src="../images/0.9.png" alt=""></li>
                <span>我的浏览</span>
            </ul>
        </div>
        <div class="i">
            <span>我的工具</span>
            <p>更多></p>
        </div>
        <div class="o">
            <ul>
                <li>
                    <img src="../images/0.2.png" alt="">
                    <span>销量排行</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/0.2.png" alt="">
                    <span>条件选车</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/0.2.png" alt="">
                    <span>新车日历</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/0.2.png" alt="">
                    <span>销量排行</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/0.2.png" alt="">
                    <span>销量排行</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/0.2.png" alt="">
                    <span>销量排行</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/0.2.png" alt="">
                    <span>销量排行</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/0.2.png" alt="">
                    <span>销量排行</span>
                </li>
            </ul>
        </div>
        <div class="p">
            <span>我的爱车</span>
        </div>
        <div class="a">
            <ul>
                <li>
                    <img src="../images/10.png" alt="">
                    <span>添加爱车</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/10.png" alt="">
                    <span>添加爱车</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/10.png" alt="">
                    <span>添加爱车</span>
                </li>
            </ul>
        </div>
        <div class="s">
            <ul>
                <li>
                    <img src="../images/11.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/12.png" alt="">
                </li>
            </ul>
        </div>
        <div class="d">
            <span>车币商城</span>
            <p>更多></p>
        </div>
        <div class="f">
            <ul>
                <li>
                    <img src="../images/13.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/13.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/13.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/13.png" alt="">
                </li>
            </ul>
        </div>
        <div class="g">
            <span>精选推荐</span>
        </div>
        <div class="h">
            <ul>
                <li>
                    <img src="../images/14.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/14.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/14.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/14.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/14.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/14.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/14.png" alt="">
                </li>
            </ul>

        </div>
    </div>
</template>

<script>

</script>

<style lang="scss" scoped>
.q {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .w {
        display: flex;
        width: 100%;
        height: 50px;

        // background-color: aqua;
        span {
            font-size: 40px;
        }

        img {
            display: flex;
            width: 50px;
            height: 50px;
            margin-left: 100px;
            margin-left: 550px;
        }
    }

    .e {
        display: flex;
        width: 100%;
        height: 150px;
        // background-color: crimson;

        .left {
            display: flex;
            // background-color: cornflowerblue;
            width: 150px;
        }

        .right {
            display: flex;
            width: 600px;

            // background-color: darkgoldenrod;
            button {
                width: 200px;
                height: 70px;
                background-color: dodgerblue;
                color: rgb(247, 242, 242);
                margin-top: 45px;
                margin-left: 95px;
                border: none;
            }

            .r {

                width: 250px;
                height: 70px;
                display: flex;
                margin-left: 20px;

                //    background-color: darkgreen; 
                span {
                    font-size: 40px;
                    line-height: 70px;
                }
            }

            .t {

                width: 250px;
                height: 70px;
                display: flex;
                //    background-color: rgb(169, 176, 169); 
                margin-top: 70px;
                margin-left: -230px;

                span {
                    font-size: 20px;
                    line-height: 70px;
                    margin-top: -20px;
                    color: gray;
                }
            }

        }
    }

    .u {
        display: flex;
        width: 100%;
        height: 120px;

        // background-color: aqua;
        img {
            width: 70px;

        }

        span {
            font-size: 30px;
        }

        ul {
            display: flex;
            line-height: 120px;
        }

        li {
            margin: 20px;
        }
    }

    .i {
        display: flex;
        width: 100%;
        height: 100px;

        // background-color: antiquewhite;
        span {
            font-size: 40px;
            line-height: 100px;
        }

        p {
            color: gray;
            font-size: 35px;
            line-height: 100px;
            margin-left: 470px;
        }
    }

    .o {
        display: flex;
        // background-color: aqua;
        width: 100%;
        height: 300px;
        justify-content: center;
        flex-wrap: wrap;

        span {
            margin-left: -10px;
            display: flex;
            font-size: 30px;
        }

        img {
            width: 80px;
        }

        ul {

            margin: 25px;
        }
    }

    .p {
        display: flex;
        width: 100%;
        height: 100px;

        // background-color: antiquewhite;
        span {
            font-size: 40px;
            line-height: 100px;
        }
    }

    .a {
        display: flex;
        // background-color: aqua;
        width: 100%;
        height: 180px;

        img {
            width: 100px;
        }

        span {
            margin-top: 10px;
            display: flex;
            font-size: 30px;
        }

        ul {
            margin: 35px;
        }
    }

    .s {
        margin-top: 10px;
        display: flex;
        width: 100%;
        height: 150px;

        // background-color: burlywood;
        img {
            width: 375px;
        }
    }

    .d {
        display: flex;
        width: 100%;
        height: 100px;

        // background-color: antiquewhite;
        span {
            font-size: 40px;
            line-height: 100px;
        }

        p {
            color: gray;
            font-size: 35px;
            line-height: 100px;
            margin-left: 470px;
        }
    }

    .f {
        width: 100%;
        height: 250px;
        background-color: rgb(10, 94, 167);
        display: flex;

        img {
            width: 150px;
            margin: 18px;
        }
    }

    .g {
        display: flex;
        width: 100%;
        height: 100px;

        // background-color: antiquewhite;
        span {
            font-size: 40px;
            line-height: 100px;
        }
    }
    .h{
        flex-wrap: wrap;
        width: 100%;
        height: 1000px;
        // background-color: blue;
        display:flex ;
        img{
            width: 700px;
            margin: 20px;
        }
    }
}
</style>